<template>
  <view class="empty-content" :style="{ backgroundColor: bgColor,zIndex:zIndex ,marginTop:marginTop }">
    <image class="empty-content-image" src="/static/no-data.png" mode="aspectFit"></image>
    <view class="content_text">
      <slot name="content"></slot>
    </view>
  </view>
  <!-- https://res.jiyaqi.com/pet/miniapp/public/empty.png -->
</template>

<script>
export default {
  data () {
    return {}
  },
  props: {
    bgColor: {
      type: String,
      default: '#ffffff',
    },
	zIndex: {
	  type: Number,
	  default: -1,
	},
	marginTop: {
	  type: String,
	  default: '0px',
	},
  },
}
</script>

<style lang="scss" scoped>
.empty-content {
  width: 100%;
  min-height: 500rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  // padding-bottom: 20rpx;
  z-index: -1;

  &-image {
    height: 240rpx;
  }
  .content_text {
    color:  rgb(192, 196, 204);
    font-size: 28rpx;
    margin: 20rpx 0;
  }
}
</style>
<style lang="scss">
.content_text {
	::v-deep .tips {
		color: rgb(192, 196, 204) !important;
	}
}
</style>
